<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ajax文件上传断点续传</title>
    <style>
        dl,dt,dd{margin: 0;padding: 0;}
        table{border-collapse: 0; border-spacing: 0;}
        .uploadfile { width: 700px; margin: 0 auto;padding: 10px 15px;}
        .file{position: absolute; width: 100px; height: 32px;cursor: pointer; opacity: 0;}
        span.btn-info { display: block; width: 100px; text-align:center;height: 32px;line-height:32px;border: 1px solid #15b649;color: #15b649; cursor: pointer;border-radius: 4px; }
        .submitbtn { width: auto;padding:0 15px;height:34px;background-color: #e45f41; border:none; border-radius:4px;color:#fff;cursor: pointer;}
        .submitbtn:hover {
            background-color:#c94d31;
            color: #fff;
        }
        .upload_ul { display: none; width: 100%; border: 1px solid #e5e5e5; background-color: #fff;padding: 0;}
        .upload_ul li { display: table-row; opacity: 1; overflow: hidden; -webkit-transition: opacity .2s; transition: opacity .2s;
            background-image:-webkit-linear-gradient(top, #ABD9FF, #88C9FF);
            background-image:        linear-gradient(to bottom, #ABD9FF, #88C9FF);
            -moz-background-size: 0% 100%;
            background-size: 0% 100%;
            background-repeat: no-repeat;
        }
        .upload_title{background-color: #f5f5f5;}
        .upload_title .upload_cell{border-top: none; padding: 7px 10px;color: #888;}
        .upload_cell { display: table-cell; padding: 6px 10px; border-top: 1px solid #e5e5e5; vertical-align:middle;color: #444; }
        .upload_cell:first-child { width: 50%; }
        .waiting{ color: #e45f41; }
        .uploading { color: #15b649; }
        .canceling { color: #666; }
        .success { color: #15b649; }
        .error { color: #e45f41;}
        .remind {color: #a9804b;}
        .shanchu{ color: #42b6d3;text-decoration: none;}/* 删除 */
        .tishibox{
            padding: 5px 0;
            border: 1px solid #faebcc;
            color: #8a6d3b;
            background-color: #fcf8e3;
        }
        .tishibox dd{
            line-height: 2;
            padding: 0 15px;
            margin: 0;
        }
        span.tips {
            font-size:12px;
            color:#a9804b;
        }
        .ip-text {
            line-height:28px;
            font-size:14px;
            height:28px;
            padding-left:5px;
            color:#555;
            border:1px #e5e5e5 solid;
        }
        .keshixuanzebox{
            width: 695px;
            height:170px;
            overflow-x:hidden;
            overflow-y:auto;
        }
        .keshixuanzebox span{
            float: left;
            display: block;
            width: 49%;
            padding: 0 5px 8px 0;
            color: #555;
        }
        .keshixuanzebox span input{
            margin-right: 5px;
        }
        .al{
            text-align: left;
        }
        /* tab */
        .tabselect{
            height: 45px;
            border-bottom: 1px solid #e5e5e5;
        }
        .tabselect span{
            float: left;
            display: inline-block;
            color: #666;
            width: auto;
            padding: 0 25px;
            height: 45px;
            line-height: 45px;
            text-decoration: none;
            background-color: #fff;
            border-bottom: 1px solid #e5e5e5;
            border-top: 1px solid #fff;
            border-left: 1px solid #fff;
            border-right: 1px solid #fff;
            cursor: pointer;
        }

        .tabselect span.hover{
            color: #15b649;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            margin-bottom: -1px;
            border-top: 1px solid #e5e5e5;
            border-left: 1px solid #e5e5e5;
            border-right: 1px solid #e5e5e5;
            border-bottom: 1px solid #fff;
        }
        .tabselect span:hover{
            color: #15b649;
        }
        .tab_table dt{
            padding: 10px 0;
            font-size: 18px;
        }
        .tab_table dd.ddpad{
            padding: 10px 0;
        }

        /*icon copyright by weiyun */
        .icon { display: inline-block; width: 30px; height: 30px; background: url(file-small.png) no-repeat -74px -490px; vertical-align: middle; }
        .icon-doc,.icon-docx{background-position:0 0}
        .icon-ppt,.icon-pptx{background-position:-37px 0}
        .icon-xls,.icon-xlsx{background-position:-74px 0}
        .icon-pdf,.ico-pdf{background-position:-111px 0}
        .icon-txt,.ico-txt{background-position:-148px 0}
        .icon-msg,.ico-msg{background-position:0 -35px}
        .icon-rp,.ico-rp{background-position:-37px -35px}
        .icon-vsd,.ico-vsd{background-position:-74px -35px}
        .icon-ai,.ico-ai{background-position:-111px -35px}
        .icon-eps,.ico-eps{background-position:-148px -35px}
        .icon-log,.ico-log{background-position:0 -70px}
        .icon-xmin,.ico-xmin{background-position:-37px -70px}
        .icon-cab,.ico-cab{background-position:-74px -70px}
        .icon-psd,.ico-psd{background-position:0 -105px}
        .icon-jpg,.ico-jpg{background-position:-37px -105px}
        .icon-jpeg,.ico-jpeg{background-position:-37px -105px}
        .icon-png,.ico-png{background-position:-74px -105px}
        .icon-gif,.ico-gif{background-position:-111px -105px}
        .icon-bmp,.ico-bmp{background-position:-148px -105px}
        .icon-rmvb,.ico-rmvb{background-position:0 -140px}
        .icon-rm,.ico-rm{background-position:0 -140px}
        .icon-mod,.ico-mod{background-position:-37px -140px}
        .icon-mov,.ico-mov{background-position:-74px -140px}
        .icon-3gp,.ico-3gp{background-position:-111px -140px}
        .icon-avi,.ico-avi{background-position:-148px -140px}
        .icon-swf,.ico-swf{background-position:0 -175px}
        .icon-flv,.ico-flv{background-position:-37px -175px}
        .icon-mpe,.ico-mpe{background-position:-74px -175px}
        .icon-asf,.ico-asf{background-position:-111px -175px}
        .icon-wmv,.ico-wmv{background-position:-148px -175px}
        .icon-mp4,.ico-mp4{background-position:-185px -175px}
        .icon-wma,.ico-wma{background-position:0 -210px}
        .icon-mp3,.ico-mp3{background-position:-37px -210px}
        .icon-wav,.ico-wav{background-position:-74px -210px}
        .icon-apk,.ico-apk{background-position:0 -245px}
        .icon-ipa,.ico-ipa{background-position:-37px -245px}
        .icon-exe,.ico-exe{background-position:-74px -245px}
        .icon-msi,.ico-msi{background-position:-111px -245px}
        .icon-bat,.ico-bat{background-position:-148px -245px}
        .icon-fla,.ico-fla{background-position:0 -280px}
        .icon-htm,.ico-htm,.icon-html,.ico-html{background-position:-37px -280px}
        .icon-c,.ico-c{background-position:-111px -280px}
        .icon-xml,.ico-xml{background-position:-148px -280px}
        .icon-asp,.ico-asp{background-position:-185px -280px}
        .icon-chm,.ico-chm{background-position:0 -315px}
        .icon-hlp,.ico-hlp{background-position:-37px -315px}
        .icon-ttf,.ico-ttf{background-position:-111px -315px}
        .icon-otf,.ico-otf{background-position:-148px -315px}
        .icon-rar,.ico-rar{background-position:0 -350px}
        .icon-zip,.ico-zip{background-position:-37px -350px}
        .icon-tar,.ico-tar{background-position:-74px -350px}
        .icon-cab,.ico-cab{background-position:-111px -350px}
        .icon-uue,.ico-uue{background-position:-148px -350px}
        .icon-jar,.ico-jar{background-position:0 -385px}
        .icon-7z,.ico-7z{background-position:-37px -385px}
        .icon-iso,.ico-dmg{background-position:-74px -385px}
        .icon-dmg,.ico-dmg{background-position:-111px -385px}
        .icon-ace,.ico-ace{background-position:-148px -385px}
        .icon-bak,.ico-bak{background-position:0 -420px}
        .icon-tmp,.ico-tmp{background-position:-37px -420px}
        .icon-old,.ico-old{background-position:-74px -420px}
        .icon-document,.ico-document{background-position:0 -455px}
        .icon-exec,.ico-exec{background-position:-37px -455px}
        .icon-code,.ico-code{background-position:-74px -455px}
        .icon-image,.ico-image{background-position:-111px -455px}
        .icon-video,.ico-video{background-position:-148px -455px}
        .icon-audio,.ico-audio{background-position:0 -490px}
        .icon-compress,.ico-compress{background-position:-37px -490px}
        .icon-unknow,.ico-unknow{background-position:-74px -490px}
        .icon-filebroken,.ico-filebroken{background-position:-111px -490px}
        .icon-link,.ico-link{background-position:-111px -418px}

    </style>
</head>
<body>
<div class="uploadfile">

    <!-- 上传选择 开始 -->
    <form id="form" class="form" action="http://123.57.31.180:8080/fileUploadTest">
        <dl class="tabselect">
            <span id="shangchuan" onclick="display_show('file_list','zhuanti','shangchuan','suoshu')" class="hover">上传文件</span>
            <span id="suoshu" onclick="display_show('zhuanti','file_list','suoshu','shangchuan')">所属专题</span>
        </dl>

        <dl id="file_list" class="tab_table">
            <dt><input type="file" id="file" class="file" name="file[]" multiple><span class="btn-info">选择文件</span></dt>
            <dt>上传列表</dt>
            <dd>
                <ul id="uploadUl" class="upload_ul">
                    <li class="upload_title">
                        <div class="upload_cell">标题</div>
                        <div class="upload_cell">类型</div>
                        <div class="upload_cell">大小</div>
                        <div class="upload_cell">状态</div>
                        <div class="upload_cell">操作</div>
                    </li>
                </ul>
            </dd>
            <dd class="ddpad">
                <input type="submit" id="submit" class="submitbtn" value="开始上传">
            </dd>
        </dl>
    </form>

    <dl id="zhuanti" class="tab_table" style="display:none">
        <dt>
            课堂专题 <span class="tips">（请勾选你上传的文件所属的课堂分类）</span>
        </dt>
        <dd>
            <div id="keshixuanzebox" class="keshixuanzebox">
            </div>
        </dd>
        <dt>
        <td class="al">关键字<span class="tips">（请填写你上传的文件所包含的关键字，多个关键字之间用“，”隔开）</span></td>
        </dt>
        <dd>
            <input id="keyword" type="text" class="ip-text" style="width:490px" placeholder="请输入关键字" />
        </dd>
    </dl>
    <!-- 上传选择 结束 -->
    <!--     <dl class="tishibox">
    <dd>1. 点击默认展示的按钮选择文件；</dd>
    <dd>2. 点击后出现的上传按钮进行上传</dd>
    </dl> -->
</div>
<script id="fileTemplate" type="text/template">
    <li id="filelist_$id$">
        <div class="upload_cell">$name$</div>
        <div class="upload_cell"><i class="icon icon-$type$"></i></div>
        <div class="upload_cell">$size$</div>
        <div id="filestatus_$id$" class="upload_cell">$status$</div>
        <div id="fileoperate_$id$" class="upload_cell">$operate$</div>
    </li>
</script>
<script type="text/javascript" src="ajax-upload.js"></script>

<script>
    function getUrlParam(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r!=null) return unescape(r[2]); return "";
    }

    /**
     * 判断变量是否空值undefined, null, '', false, 0, [], {} 均返回true，否则返回false
     * @param v
     * @returns {Boolean}
     */
    function empty(v){
        switch (typeof v){
            case 'undefined' : return true;
            case 'string' : if(v.length == 0) return true; break;
            case 'boolean' : if(!v) return true; break;
            case 'number' : if(0 === v) return true; break;
            case 'object' :
                if(null === v) return true;
                if(undefined !== v.length && v.length==0) return true;
                for(var k in v){return false;} return true;
                break;
        }
        return false;
    }

    var Token = getUrlParam('Token');
    var myFileId = getUrlParam('myFileId');
    if (empty(Token) && empty(myFileId)){
//        layer_close();
        document.getElementById("submit").setAttribute("disabled","true");
    }
</script>

<script>
    function selectCourseProject(){
        var xhr_filesize = new XMLHttpRequest();
        xhr_filesize.open("get", "../CourseProject/selectAllList", true);
        xhr_filesize.onreadystatechange = function(e) {
            if (xhr_filesize.readyState == 4) {
                if (xhr_filesize.status == 200 && xhr_filesize.responseText) {
                    var json = JSON.parse(xhr_filesize.responseText);
                    console.log(json);
                    if (json.rtnCode=="0000000" && json.bizData) {
                        var data = json.bizData;
                        var trs = "";
                        for(var i=0;i<data.length;i++){
                            var name = data[i].name.substring(0, 17);
                            trs += '<span title="'+data[i].name+'" ><label><input type="checkbox" value="'+data[i].id+'" name="keshi">'+name+'...</label></span>';
                        }
                        document.getElementById("keshixuanzebox").innerHTML = trs;
                    }
                }
            }
        };
        xhr_filesize.send();
    }
    selectCourseProject();
</script>

<script type="text/javascript">
    function display_show(s_id, h_id, add_class, rmove_class){
        document.getElementById(s_id).setAttribute("style","");
        document.getElementById(h_id).setAttribute("style","display:none");
        document.getElementById(rmove_class).setAttribute("class","");
        document.getElementById(add_class).setAttribute("class","hover");
    }
</script>

</body>
</html>
